<template>
  <q-page>
    <q-card class="q-ma-sm">
      <q-card-title>
        构建列表--(项目名：<span style="color:#00c853;">{{$route.params.prjName}}</span>)
      </q-card-title>
    </q-card>
    <q-card class="q-ma-sm">
      <q-card-main>
        <q-table grid :data="tableData" :columns="columns" :pagination.sync="serverPagination" row-key="name"
                 :rows-per-page-options="rowsPerPageOptions" ref="table" @request="request" :loading="loading"
                 :visible-columns="visibleColumns">
          <template slot="top-left" slot-scope="props">
            <q-btn color="negative" class="float-right q-ma-xs" icon="add" @click.native="$store.commit('listPublish/openNewPublish', $route.params.projectId)"></q-btn>
            <q-btn color="secondary" class="float-right q-ma-xs" @click.native="$store.commit('listPublish/openRestartService', $route.params.projectId)">服务启停</q-btn>
            <q-btn v-if="fileButton" color="secondary" class="float-right q-ma-xs" @click.native="$store.commit('listPublish/openFileReplace', $route.params.projectId)">文件替换</q-btn>
            <q-btn color="primary" class="float-right q-ma-xs" @click.native="$router.push('/listpubproject')">返回</q-btn>
            <q-table-columns color="secondary" class="q-ma-xs" v-model="visibleColumns" :columns="columns"/>
            <q-btn flat round dense :icon="props.inFullscreen ? 'fullscreen_exit' : 'fullscreen'" @click="props.toggleFullscreen"/>
          </template>
          <div slot="item" slot-scope="props" class="q-pa-xs col-xs-12 col-md-4 col-sm-6 col-lg-3 transition-generic">
            <q-card class="text-white" style="background: linear-gradient(145deg,#027be3, #014a88);" dark>
              <q-card-title @click.native="$store.commit('listPublish/showHost', props.row.hosts)">
                <span style="color:yellow;">状态：{{ props.row.status }}</span>
                <q-icon v-if="props.row.status_code===6" slot="right" name="done" />
                <q-icon v-if="props.row.status_code===8" color="negative" slot="right" name="fast_forward"
                        @click.native.stop="$store.dispatch('listPublish/grayContinue', props.row.id)" />
                <q-spinner-cube v-if="props.row.status_code===1" slot="right" :size="30" />
              </q-card-title>
              <q-card-main style="word-break:break-all;">
                {{ props.row.version }}
                <q-card-separator />
                <q-item v-for="(col) in props.cols" :key="col.id" style="min-height: 30px;">
                  <q-item-main><div class="toufu">{{ col.label }}</div></q-item-main>
                  <q-item-side right color="white"><div class="toufu">{{ col.value }}</div></q-item-side>
                </q-item>
              </q-card-main>
              <q-card-separator />
              <q-card-actions>
                <q-btn color="primary" v-if="props.row.status_code === 0" @click.native="$store.commit('listPublish/openPublish', props.row.id)">滚动发布</q-btn>
                <q-btn color="negative" v-if="props.row.status_code === 0 && props.row.allow_gray" @click.native="$store.commit('listPublish/openGrayPublish', props.row.id)">灰度发布</q-btn>
                <q-btn color="info" v-if="props.row.status_code === 1 || props.row.status_code === 6 || props.row.status_code === 7
              || props.row.status_code === 4" @click.native="$store.commit('listPublish/openPubInfo', props.row.id)">执行情况</q-btn>
                <q-btn color="secondary" v-if="props.row.status_code !== 3" @click.native="$store.dispatch('listPublish/deletePublish', props.row.id)">失效</q-btn>
              </q-card-actions>
            </q-card>
          </div>
        </q-table>
      </q-card-main>
    </q-card>
    <verify :vcodeDialog = "verifyDialog" @upVerify="$store.dispatch('listPublish/doPublish', pubId)"
            :verifyTitle="verifyTitle" @clsVerify="verifyDialog = false" ></verify>
    <verify :vcodeDialog = "grayDialog" @upVerify="$store.dispatch('listPublish/doGrayPublish', pubId)"
            :verifyTitle="verifyTitle" @clsVerify="grayDialog = false" ></verify>
    <NewPublish :newPublishDialog = "newPublishDialog" @clsNewPublish="newPublishDialog = false" :pid="pid"/>
    <PublishInfo :infoDialog = "infoDialog" @upInfo="infoDialog = false" :publishId="pubId"/>
    <RestartService :restartServiceDialog = "restartServiceDialog" @clsRestartService="restartServiceDialog = false" :pid="pid"/>
    <FileReplace :fileReplaceDialog = "fileReplaceDialog" @clsFileReplace="fileReplaceDialog = false" :pid="pid"/>
  </q-page>
</template>

<script>
import listPublishModule from '../../store/listPublish'
import newPublishModule from '../../store/newPublish'
import restartServiceModule from '../../store/restartService'
import fileReplaceModule from '../../store/fileReplace'
export default {
  preFetch ({ store, currentRoute }) {
    store.registerModule('listPublish', listPublishModule)
    store.registerModule('newPublish', newPublishModule)
    store.registerModule('restartService', restartServiceModule)
    store.registerModule('fileReplace', fileReplaceModule)
    Promise.all([
      store.dispatch('listPublish/loadHeaders'),
      store.dispatch('listPublish/loadTable', currentRoute.params.projectId),
      store.dispatch('listPublish/getFileReplace', currentRoute.params.projectId)])
      .then((result) => {
      }).catch((error) => {
        console.log(error)
      })
  },
  name: 'ListPublish',
  data: function () {
    return this.$store.state.listPublish
  },
  methods: {
    request (props) {
      this.serverPagination = props.pagination
      this.$store.dispatch('listPublish/loadTable', this.$route.params.projectId)
    },
    nextGray () {
      alert('123')
    }
  },
  beforeDestroy () {
    this.$store.unregisterModule('listPublish')
    this.$store.unregisterModule('newPublish')
    this.$store.unregisterModule('restartService')
    this.$store.unregisterModule('fileReplace')
  },
  components: {
    verify: () => import('components/verify/verify'),
    NewPublish: () => import('pages/publish/NewPublish'),
    PublishInfo: () => import('pages/publish/PublishInfo'),
    RestartService: () => import('pages/publish/RestartService'),
    FileReplace: () => import('pages/publish/FileReplace')
  }
}
</script>

<style>
</style>
